<script>
//外部链接组件
import { mapGetters } from 'vuex';
import * as types from '../../../store/types';
import FrameToolbar from '../cardtoolbar/FrameToolbar';
import ControlTools from './ControlTools.js';

export default {
  name: 'ImgItem',
  components: {
    FrameToolbar,
  },
  mixins: [ControlTools],
  props: {
    //itemConfig.url：iframe地址
    itemConfig: {
      type: Object,
      default: () => {},
    },
    //图表配置项ID
    chartId: {
      type: String,
      default: () => '',
    },
  },
  computed: {
    ...mapGetters(['controls']),
  },
  methods: {
    //保存链接配置
    saveImage() {
      let control = this.controls[this.chartId];
      control.options.url = this.itemConfig.url;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.chartId]: control },
      });
    },
  },
};
</script>

<template>
  <div class="frame-item-wrapper">
    <FrameToolbar
      v-if="hideTools"
      :chart-id="chartId"
      class="layout-toolbar">
    </FrameToolbar>
    <div
      v-if="itemConfig.url"
      class="frame-item-view">
      <iframe
        :src="itemConfig.url"
        frameborder="no"
        border="0" />
    </div>
    <div
      v-else
      class="frame-item-empty">
      未添加超链接
    </div>
  </div>
</template>

<style lang="less">
.frame-item-wrapper {
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  .frame-item-view,
  .frame-item-empty {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    > iframe {
      width: 100%;
      height: 100%;
    }
  }
  .frame-item-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #999999;
    cursor: pointer;
  }
  .layout-toolbar {
    display: none !important;
  }
}
</style>
